<!DOCTYPE html>
<html>
<head>
<title>福星开门红包</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta http-equiv="Cache-Control"
	content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Expires" content="0" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="css/style.css" />
<style type="text/css">
body, html {
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

.hongbao-box {
	background: url(images/hongbao_bg.png);
	background-size: 100%;
	width: 5.95rem;
	height: 6.03rem;
	position: absolute;
	top: 2.65rem;
	left: 50%;
	margin-left: -2.975rem;
}

.close {
	width: 0.47rem;
	position: absolute;
	top: 0.16rem;
	right: 0.18rem;
}

.my-hongbao {
	line-height: 0.95rem;
	width: 4.85rem;
	background-color: #fffc04;
	color: #FD2929;
	font-size: 0.41rem;
	position: absolute;
	left: 0.57rem;
	bottom: 0.29rem;
	border-radius: 0.4rem;
}

.hongbao-title {
	padding-top: 0.58rem;
}

.hongbao-title, .hongbao-title span {
	text-align: center;
	font-size: 0.51rem;
	/*line-height: 0.51rem;*/
	color: #FFFFFF;
}

.hongbao-title span {
	font-size: 0.41rem;
}

.no-prize, .voucher, .property {
	margin-top: 0.4rem;
	position: relative;
}

.text {
	width: 2.5rem;
	height: 1.2rem;
	font-size: 0.35rem;
	line-height: 0.42rem;
	position: absolute;
	top: 0.15rem;
	left: 0.785rem;
	color: #FFFFFF;
	display: table;
}

.text .info {
	color: #FFFFFF;
	vertical-align: middle;
	display: table-cell
}

.gift {
	width: 5.38rem;
	margin: 0 auto;
	display: block;
}

.alert {
	font-size: 0.28rem;
	padding-top: 0.22rem;
	text-align: center;
	color: #FFFFFF;
}

.card img {
	padding-top: 0.3rem;
	display: block;
	margin: 0 auto;
	width: 1.95rem;
}
</style>
</head>
<body>
	<div class="hongbao-box" v-if="prizeData" v-show='prizeData'
		style="display: none;">
		<img src="images/hongbao_close.png" class="close" @click="close"/>
		<p class="hongbao-title">
			{{prizeData.title}}<br /> <span>{{prizeData.detail}}</span>
		</p>
		<div class="no-prize" v-if="prizeData.type == 4">
			<img src="images/hongbao_noprize.png" class="gift" />
			<div class="text">
				<div class="info">{{prizeData.awardInfo}}</div>
			</div>
		</div>
		<div class="voucher" v-if="prizeData.type == 2">
			<img src="images/hongbao_voucher.png" class="gift" />
			<p class="alert">主人~红包已到帐，活动结束后记得去兑换！</p>
		</div>
		<div class="property" v-if="prizeData.type == 1">
			<img src="images/hongbao_property.png" class="gift" />
			<p class="alert">主人~注意安全，回家后记得使用红包！</p>
		</div>
		<div class="card" v-if="prizeData.type == 3">
			<img :src="prizeData.cardImg" />
		</div>
		<button class="my-hongbao" @click="go">{{prizeData.btnInfo}}
		</button>
	</div>
	<script type="text/javascript" src="js/ms-common.js"></script>
	<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script>
		new Vue({
			el : '.hongbao-box',
			data : {
				prizeData : null
			},
			methods : {
				go : function() {
					window.location.href = './index.html'
				},
				close: function () {
					//TODO 关闭webview
					
				}
			},
			created : function() {
				var _self = this;
				$mscomm.jqpost("API/fxRedPacket", {
					"token" : $mscomm.getProperty("token"),
				}, function(data) {
					//					    var data = {"ec":"M00000","em":"","requestURI":"","execptionTrace":"","cd":{
					//					    	type:'1',
					//					    	awardInfo:'福',
					//					    	"success":true
					//					    }}

					if (data.ec === 'M00000') {
						var prizeData = {
							type : data.cd.type,
							awardInfo : data.cd.awardInfo,
						}
						if (prizeData.type == '1') {

							prizeData.title = '恭喜您！'
							prizeData.detail = '获得旅游大礼包'
							prizeData.btnInfo = '查看我的红包'
						} else if (prizeData.type == '2') {

							prizeData.title = '恭喜您！'
							prizeData.detail = '获得民生易贷代金券'
							prizeData.btnInfo = '查看我的红包'
						} else if (prizeData.type == '3') {
							if (prizeData.awardInfo == '福') {
								prizeData.cardImg = 'images/card-fu.png'
							} else if (prizeData.awardInfo == '星') {
								prizeData.cardImg = 'images/card-xing.png'
							} else if (prizeData.awardInfo == '智') {
								prizeData.cardImg = 'images/card-zhi.png'
							} else if (prizeData.awardInfo == '慧') {
								prizeData.cardImg = 'images/card-hui.png'
							} else if (prizeData.awardInfo == '家') {
								prizeData.cardImg = 'images/card-jia.png'
							}
							prizeData.title = '恭喜您！'
							prizeData.detail = '获得民生易贷福利卡'
							prizeData.btnInfo = '查看我的战绩'
						} else if (prizeData.type == '4') {
							prizeData.title = '智慧家&民生易贷'
							prizeData.detail = '春季送惊喜！'
							prizeData.btnInfo = '查看我的战绩'
						}
						_self.prizeData = prizeData
					} else {
						$mswindow.alert(data.em,function () {
							_self.close()
						});
					}

				});
			}
		})
	</script>

</body>
</html>